<template>
	<view class="container">
		<view class="sex">
			<view style="padding: 0 30rpx; margin: 20rpx">
				<u--form labelPosition="left">
					<u-form-item label="性别">
						<u-radio-group
							v-model="radiovalue1"
							placement="row"
							@change="groupChange"
						>
							<u-radio
								:customStyle="{ margin: '16rpx' }"
								v-for="(item, index) in radiolist1"
								:key="index"
								:label="item.name"
								:name="item.value"
							></u-radio>
						</u-radio-group>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="submit_btn">
			<u-button type="primary" shape="circle" text="保存"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 基本案列数据
			radiolist1: [
				{
					name: '未知',
					value: 0
				},
				{
					name: '男',
					value: 1
				},
				{
					name: '女',
					value: 2
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: 0
		};
	},
	methods: {
		groupChange(n) {
			console.log('groupChange', n);
		},
		radioChange(n) {
			console.log('radioChange', n);
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.sex {
	background-color: #fff;
}
.submit_btn {
	padding: 30rpx;
}
</style>
